wordpress - 高度なカスタム フィールドに Javascript API を使用する

Question

高度なカスタム フィールドを使用して新しいフィールド タイプを作成しています。これにより、ユーザーは画像ライブラリから画像を選択し、この画像のポイント (X、Y 座標) を定義できます。座標を定義した後、ユーザーはこのポイントにオーバーレイ ビデオを配置できます。しかし、私の質問は、javascript API を使用してデータベース内の X と Y の値を取得および設定するにはどうすればよいですか?

Answer 1

さて、@ObmerKronenは、私がやろうとしていることを実証するためにいくつかのコードを投稿することを提案しました...理にかなっています:)

新しい ACF フィールド php ファイル (class-tas-v5.php) に画像を追加しました。

$imgID = get_field('image_url');
$img = wp_get_attachment_image( $imgID, "full", "", array( "class" => "overlay-point-img" ) );
echo '<div class="overlay-point-img-container">' . $img . '</div>';   

次に、input.js ファイルで X 座標と Y 座標を定義しています。

function initialize_field($field) {

var overlay_point_container = $field.context;
var img = $(overlay_point_container).find(".overlay-point-img-container");
var circle = '<div class="overlay-point-circle"></div>';
img.prepend(circle);

$(img).on("mousemove", function(event) {
  var relX = event.pageX - $(this).offset().left;
  var relY = event.pageY - $(this).offset().top;

  $(circle).css({ left: relX, top: relY });
});

// Tried these two functions, but none of the values are saved in the database
// acf.set("posX", "123"); 
// $field.val("posX");
}

このようなダミーデータで保存しようとしました

acf.set("posX", "123"); 
$field.val("posX");